<template>
  <el-row :gutter="20">
    <el-col :md="12" :xs="24" :sm="24">
      <el-card shadow="hover" class="animate__animated animate__fadeInLeft">
        <el-descriptions title="系统信息" :column="1" border style="width: 100%">
          <el-descriptions-item label="框架版本">
            V {{ system.version }}
            <el-tag v-if="update.sys_update && update.sys_update.length > 0" effect="dark" type="danger" size="small">有新版本</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="服务器软件"> {{ system.server }}</el-descriptions-item>

          <el-descriptions-item label="PHP版本">PHP Version {{ system.php_version }}</el-descriptions-item>
          <el-descriptions-item label="调试模式">
            <el-switch v-model="system.debug" active-text="开启" inactive-text="关闭" active-color="#F00" @change="setSystemDebug" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :md="6" :xs="24" :sm="12">
      <el-card shadow="hover" class="animate__animated animate__fadeInRight product_new over">
        <h3>产品动态</h3>
        <el-empty v-if="newList.length <= 0" style="padding: 0" />
        <p v-for="(item, key) in newList" :key="key">
          <el-link :href="item.url" target="_blank">{{ item.title }}</el-link>
          <span>{{ item.datetime }}</span>
        </p>
      </el-card>
    </el-col>
    <el-col :md="6" :xs="24" :sm="12">
      <el-card shadow="hover" class="animate__animated animate__fadeInRight">
        <el-descriptions title="开发团队" :column="1" border style="width: 100%">
          <el-descriptions-item label="研发企业"
            ><el-link href="http://www.dkyx.cc" target="_blank">成都多客怪兽科技</el-link>
          </el-descriptions-item>
          <el-descriptions-item label="系统生态"
            ><svg class="icon w-16px h-16px mr-2px" aria-hidden="true">
              <use xlink:href="#icon-QQ"></use>
            </svg>
            QQ群：2601616
          </el-descriptions-item>
          <el-descriptions-item label="系统内核">Thinkphp8 Vue3</el-descriptions-item>
          <el-descriptions-item label="代码仓库">
            <el-link href="https://gitee.com/dkgs/dkgs-saas" target="_blank" class="mr2">
              <svg class="icon w-16px h-16px mr-2px" aria-hidden="true">
                <use xlink:href="#icon-gitee"></use>
              </svg>
              Gitee
            </el-link>
            <el-link href="https://github.com/imlhb/dkgs-saas" target="_blank">
              <svg class="icon w-16px h-16px mr-2px" aria-hidden="true">
                <use xlink:href="#icon-github"></use>
              </svg>
              Github
            </el-link>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getFooterMsg, setSystemDebug } from '@/api'

export default {
  name: 'DkDashboardFooter',
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      newList: {},
      system: {},
      update: {},
      ad: {}
    }
  },
  computed: {},
  mounted() {
    getFooterMsg().then((res) => {
      this.newList = res.data.newList
      this.system = res.data.system
      this.ad = res.data.ad
      this.update = res.data.update
      this.checkUpdate(this.update)
    })
  },
  methods: {
    setSystemDebug() {
      setSystemDebug().then((res) => {
        this.$message.success(res.msg)
      })
    },
    checkUpdate(update) {
      this.$notify.closeAll()
      if (update.sys_update.length > 0) {
        this.$notify.info({
          title: '系统更新',
          message: '您的系统有' + update.sys_update.length + '个版本需要更新，点击前往',
          position: 'bottom-right',
          onClick: () => {
            this.$router.push('/cloud/upgrade')
          }
        })
      }
      if (update.addon_update.length > 0) {
        setTimeout(() => {
          this.$notify.info({
            title: '应用更新',
            message: '您的系统有' + update.addon_update.length + '个应用有新版本了,点击前往',
            position: 'bottom-right',
            onClick: () => {
              this.$router.push('/addons/list')
            }
          })
        }, 100)
      }
      console.log(update)
    }
  }
}
</script>

<style scoped lang="scss">
.animate__animated {
  min-height: 270px;
}

.product_new {
  h3 {
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 10px;
  }

  p {
    &:hover {
      color: #3a8ee6;
    }

    line-height: 32px;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    span {
      float: right;
    }
  }
}
</style>
